/**
 * Created by dengtao on 2016/1/20.
 */
$(function () {
    var cShade = {
        badge: false,
        newObj: function () {
            if (!this.badge) {
                this.init.prototype = cShade;
                this.badge = true;
            }
            return this.init();
        },
        countVW: function (wh) {
            return (wh / cShade.tDate.bw) * 100;
        },
        getClientSize: function () {
            cShade.tDate = {'bw': document.body.offsetWidth, 'bh': document.body.offsetHeight};
        },
        getMousePos: function (event) {//获取鼠标坐标
            var e = arguments.callee.caller.arguments[0] || window.event;
            return {'x': e.pageX, 'y': e.pageY};
        },
        addStyle: function (str) {
            var style = document.createElement("style");
            style.type = 'text/css';
            if (style.styleSheet) {//ie下
                style.styleSheet.cssText = str;
            } else {
                style.innerHTML = str;
            }
            $(document.body).after(style);//或者写成 nod.appendChild(document.createTextNode(str))
        },
        addElementDiv: function (x, y, ispre, style) {//新建div
            cShade.getClientSize();
            var div = document.createElement("a");
            div.setAttribute("class", "newDiv");
            //cShade.tDate.bw
            if (ispre) {
                $(div).attr('href_', x).attr('isid_', y)
                div.style = style;
            } else {
                div.style.top = cShade.countVW(y) + 'vw';
                div.style.left = cShade.countVW(x) + 'vw';
                $(div).css('z-index','9999');
            }

            div.innerHTML = "<div class='islink'>链</div><div class='isID'>ID</div><div class='isclose'>X</div>";

            $(div).appendTo($('body'));// .appendChild();
            return div;
        },
        createEvent: function () {//编辑模式
            //$($("[data-editor]")[0]) 取所有带 data-editor 属性的元素
            $("[" + cShade.flag + "]").on('mousedown', function () {
                var pos = cShade.getMousePos();
                var div = cShade.addElementDiv(pos.x, pos.y);//新建div
                document.body.onmousemove = function () {
                    var pos1 = cShade.getMousePos();
                    div.style.width = cShade.countVW(pos1.x - pos.x) + 'vw';//新建并设置大小
                    div.style.height = cShade.countVW(pos1.y - pos.y) + 'vw';
                }
            })
            document.body.onmouseup = function () {//松开鼠标时
                document.body.onmousemove = null;//取消事件
            }
            $(document).on('mousedown', '.newDiv', function () {//点击热点
                var that = this;
                var pos = cShade.getMousePos();//鼠标位置
                var top_ = pos.y - this.offsetTop;//鼠标位置-元素位置=位置差
                var left_ = pos.x - this.offsetLeft;
                document.body.onmousemove = function () {//move移动p
                    var pos1 = cShade.getMousePos();
                    cShade.getClientSize();
                    var x = (pos1.x - left_ + $(that).width()) >= cShade.tDate.bw ? (cShade.tDate.bw - $(that).width() - 5) : (pos1.x - left_);//判断X坐标不可超过页面宽度
                    var y = pos1.y - top_;//y坐标
                    that.style.left = cShade.countVW(x) + 'vw';
                    that.style.top = cShade.countVW(y) + 'vw';
                }
            })
            $(document).on('click', '.isclose', function () {//关闭热点
                $(this).parent().fadeOut(500, function () {
                    $(this).remove();
                })
                return false;
            })
            $(document).on('click', '.islink', function () {//修改链接
                var isk = prompt('请输入超链接', $(this).closest('a.newDiv').attr('href_'));
                if (isk != null) {
                    $(this).closest('a.newDiv').attr('href_', isk);
                }

                return false;
            })
            $(document).on('click', '.isID', function () {//修改ID
                var isk = prompt('请输入产品ID', $(this).closest('a.newDiv').attr('isid_'));
                if (isk != null) {
                    $(this).closest('a.newDiv').attr('isid_', isk);
                }

                return false;
            })
        },
        bindEvent: function () {//bind事件
        },

        saveShade: function () {//保存热点
            var shadeJson = [];
            $('.newDiv').each(function () {
                shadeJson.push("{'id':'" + cShade.paramURL['pid'] + "','style':'" + $(this).attr('style') + "', 'href':'" + $(this).attr('href_') + "', 'pid':'" + $(this).attr('isid_') + "'},");
            })
            var jsonstr = shadeJson.join('');
            jsonstr = "str=[" + jsonstr.substring(0, jsonstr.length - 1) + "]";

            $.ajax({
                type: "get",
                url: cShade.Isrc_save,
                dataType: "json",
                data: jsonstr,
                success: function (e) {
                    console.log(e);
                    alert('保存成功！');
                },
                error: function (e) {
                    console.log(e);
                }
            })
        },
        openShade: function () {//编辑模式-加载热点
            $('.newDiv').removeClass('linkDiv');//显示已有热点
            cShade.createEvent();
            $.ajax({
                type: "get",
                url: cShade.Isrc_pre,
                dataType: "json",
                data: "pageId=" + cShade.paramURL['pid'],
                success: function (e) {
                    $.each(e, function (i, v) {
                        console.log(v);
                        cShade.addElementDiv(v.href, v.productId, true, v.style);
                    })
                    //cShade.addElementDiv(0, 0, true);
                },
                error: function (e) {
                    console.log(e);
                }
            })
            $('body').after('<a id="saves" href="javascript:">保存热点</a>');
        },
        preShade: function (shadeJson) {//预览模式-加载热点
            cShade.shadeJson = shadeJson;
            $.each(cShade.shadeJson, function (i, v) {
                var div = document.createElement("a");
                div.setAttribute("class", "newDiv");
                div.setAttribute('style', v.style + 'background-color: rgba(72, 247, 247, 0.3);border: 1px solid #07ACC5;');
                div.setAttribute('href', (v.href ? v.href : v.pid));
                $(document.body).after(div);//.appendChild();
            })
        },

        ParseURLParams: function () {
            var url = window.location.href;
            var reg = /([^?=&]+)=([^?=&]+)/g;
            while (reg.test(url)) {
                cShade.paramURL[RegExp.$1] = RegExp.$2;
            }
        },
        setIurl: function () {
            return cShade.Isrc_pre;
        },
        init: function () {
            cShade.flag = 'data-editor';//热点标记
            cShade.paramURL = [];
            cShade.ParseURLParams();//取参数
            cShade.addStyle('.newDiv{position:absolute;min-width:30px;min-height:20px;height:30px;cursor: pointer;}body>.newDiv{background-color:rgba(72, 247, 247, 0.3);border: 1px solid #07ACC5;cursor: move;}.isID{font-weight: bolder;position: absolute;top: 20px;right: -1px;cursor: pointer;width:20px;height: 20px;text-align: center;line-height: 18px;border: 1px solid rgba(11, 151, 156, 0.7);}  .islink {font-weight: bolder;position: absolute;top: -1px;right: -1px;cursor: pointer;width:20px;height: 20px;text-align: center;line-height: 18px;border: 1px solid rgba(11, 151, 156, 0.7);}.isclose {font-weight: bolder;position: absolute;top: -22px;right: -1px;cursor: pointer;width: 20px;height: 20px;text-align: center;line-height: 20px;border: 1px solid rgba(11, 151, 156, 0.7);}#saves {position: fixed;z-index: 9999;right: 0px;top: 20px;text-align: center;width: 80px;height: 36px;line-height: 36px;cursor: pointer;background: #84b5dc;border: 0 none;border-radius: 5px;color: #fff;font-size: 16px;}');//初始化样式
            $("[" + cShade.flag + "]").find('img').prop('draggable', false);//使热点图片不可拖拽
            cShade.Isrc_save = 'http://192.168.100.35:8080/eos.web/a/cmsdemo/template/saveAnchor';
            cShade.Isrc_pre = 'http://192.168.100.35:8080/eos.web/a/cmsdemo/template/findAnchor';
            //cShade.bindEvent();//bind事件
            //cShade.preShade();//load热点
            //cShade.openShade();//打开编辑模式

            $.extend({
                openNewShade: cShade.openShade,
                saveNewShade: cShade.saveShade,
                createShade: cShade.preShade,
                getIsrc_pre: cShade.setIurl,
            })
        }
    }
    cShade.newObj();

})
